<template>
    <div class="well">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="row">
                <div class="col-md-12 text-right margin-bottom-10">
                    <btn-add></btn-add>
                </div>
            </div>

            <table class="table table-bordered table-striped table-hover table-condensed">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>名称</th>
                        <th>描述</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(role, key) in roles" v-bind:class="{ danger: role.status == 0 }">
                        <td>{{ key + 1 }}</td>
                        <td>{{ role.name }}</td>
                        <td>{{ role.description }}</td>
                        <td>{{ role.updated_at }}</td>
                        <td>
                            <btn-edit :data="role"></btn-edit>
                            <btn-give-permission :id="role.id"></btn-give-permission>
                            <btn-destroy :id="role"></btn-destroy>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- form modal -->
        <div class="modal" v-bind:id="'modal-' + name" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">{{ method + title }}</h4>
                    </div>
                    <form role="form" @submit.prevent="submit">
                        <div class="modal-body">
                            <!-- name -->
                            <div class="form-group" :class="{'has-error': errors.has('name')}">
                                <label for="name-field">名称</label>
                                <input v-model="role.name" v-validate data-vv-rules="required|max:50" data-vv-as="名称"
                                       type="text" class="form-control" id="name-field" name="name" placeholder="请输入名称">

                                <!-- error msg -->
                                <span v-show="errors.has('name')" class="help-block">{{ errors.first('name') }}</span>
                            </div>

                            <!-- sort -->
                            <div class="form-group">
                                <label for="sort-field">描述</label>
                                <input v-model="role.description"
                                       type="text" class="form-control" id="sort-field" name="description">
                            </div>

                            <!-- status -->
                            <div class="form-group">
                                <label>状态</label>
                                <div class="radio">
                                    <label class="no-padding">
                                        <input v-model="role.status" name="status" value="1" type="radio">
                                        <span class="text">启用 </span>
                                    </label>
                                    <label>
                                        <input v-model="role.status" name="status" value="0" type="radio" class="colored-danger">
                                        <span class="text">禁用 </span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <!-- 分配权限 -->
        <give-permission ref="givePermission" :name="name" :title="title"></give-permission>
    </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.refresh();

            // form modal隐藏事件
            this.modal.on('hidden.bs.modal', response => {
                this.errors.clear();
            });
        },
        data(){
            return {
                index: 0,
                name: this.$route.name,
                title: '角色',
                role: {},
                roles: [],
            }
        },
        methods: {
            /**
             * 添加
             */
            add(){
                this.role = {
                    name: '',
                    description: '',
                    status: 1,
                };
                this.showForm();
            },

            /**
             * 编辑
             *
             * @param object role
             */
            edit(role){
                this.setIndex(role);
                this.get(this.name + '/' + role.id + '/edit').then(response => {
                    this.role = response;
                    this.showForm();
                });
            },

            /**
             * 删除
             *
             * @param integer id 主键ID
             */
            destroy(role){
                this.setIndex(role);
                this.confirm(() =>{
                    this.delete(this.name + '/' + role.id).then(response => {
                        this.refresh('DESTROY');
                        this.alert(this.title + '删除成功！');
                    });
                });
            },

            /**
             * 提交表单
             */
            submit(){
                this.$validator.validateAll().then(result => {
                    if(result){
                        let config = {
                            url: this.name + (this.role.id ? '/' + this.role.id : ''),
                            type: this.role.id ? 'PATCH' : 'POST',
                            data: this.role,
                        };

                        this.ajax(config).then(response => {
                            this.alert(this.title + this.method + '成功！');
                            this.modal.modal('hide');
                            this.refresh(config.type, response);
                        });
                    }
                });
            },

            /**
             * 更新数据
             */
            refresh(type, data){
                switch(type){
                    case 'POST': // 新建
                        this.roles.push(data);
                        break;
                    case 'PATCH': // 编辑
                        this.$set(this.roles, this.index, data);
                        break;
                    case 'DESTROY': // 删除
                        this.roles.splice(this.index, 1);
                        break;
                    default:
                        this.get(this.name).then(response => {
                            this.roles = response;
                        });
                        break;
                }
            },

            /**
             * 显示表单模态框
             */
            showForm(){
                this.modal.modal('show');
            },

            /**
             * 设置当前操作元素索引
             */
            setIndex(role){
                this.index = this.roles.indexOf(role);
            }
        },
        computed: {
            /**
             * 表单模态框
             *
             * @returns {*|jQuery|HTMLElement}
             */
            modal: function(){
                return $("#modal-" + this.name);
            },

            /**
             * 操作类型
             * @returns {string}
             */
            method: function(){
                return this.role.id ? '编辑' : '创建';
            },
        },
    }
</script>
